<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收货地址 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/addresses.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <main  id="app">
        <div class="addresses-container">
            <div class="addresses-header">
                <h2>我的收货地址</h2>
                <button class="add-address-button" @click="openNewAddress">添加地址</button>
            </div>
            <div class="address-list">
                <table>
                    <thead>
                        <tr>
                            <th>收货人</th>
                            <th>电话/手机</th>
                            <th>所在地区</th>
                            <th>详细地址</th>
                            <th>操作</th>
                            <th>移动设置</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="addr in addresses" :key="addr.addressId">
                            <td>{{ addr.name }}</td>
                            <td>{{ addr.phone }}</td>
                            <td>{{ addr.region }}</td>
                            <td>{{ addr.address }}</td>
                            <td>
                                <button class="action-btn edit-btn" @click="editAddress(addr)">修改</button>
                                <button class="action-btn delete-btn" @click="confirmDelete(addr)">删除</button>
                            </td>
                            <td>
                                <span v-if="addr.isDefault" class="default-address">默认地址</span>
                                <button v-else class="set-default-btn" @click="setDefault(addr.addressId)">设为默认</button>
                            </td>
                        </tr>
                        <tr v-if="addresses.length === 0">
                            <td colspan="6" style="text-align:center;color:#888;">暂无收货地址</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
        <!-- 新建地址模态框 -->
        <div id="newAddressModal" class="modal" :style="{ display: showModal ? 'block' : 'none' }">
            <div class="modal-content">
                <span class="close" @click="showModal=false">&times;</span>
                <div class="modal-header">
                    <h3>{{ editMode ? '修改地址' : '新建地址' }}</h3>
                </div>
                <div class="modal-body">
                    <div class="delivery-location">
                        <span>当前配送至</span>
                        <span class="location">中国大陆</span>
                        <a href="#" class="change-location">切换 ></a>
                    </div>
                    <form class="info-form">
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="addressInfo">地址信息:</label>
                            <div class="address-selects">
                                <select id="provinceSelect" v-model="currentAddress.province"
                                    @change="onProvinceChange">
                                    <option value="">请选择省份</option>
                                    <option v-for="p in provinces" :key="p" :value="p">{{ p }}</option>
                                </select>
                                <select id="citySelect" v-model="currentAddress.city" @change="onCityChange">
                                    <option value="">请选择城市</option>
                                    <option v-for="c in cities" :key="c" :value="c">{{ c }}</option>
                                </select>
                                <select id="districtSelect" v-model="currentAddress.district">
                                    <option value="">请选择区域</option>
                                    <option v-for="d in districts" :key="d" :value="d">{{ d }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="detailedAddress">详细地址:</label>
                            <textarea id="detailedAddress" v-model="currentAddress.address"
                                placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></textarea>
                        </div>
                        <div class="form-group">
                            <span class="required">*</span>
                            <label for="recipientName">收货人姓名:</label>
                            <input type="text" id="recipientName" v-model="currentAddress.name"
                                placeholder="长度不超过25个字符">
                        </div>
                        <div class="form-group phone-group">
                            <span class="required">*</span>
                            <label for="phoneNumber">手机号码:</label>
                            <select id="countryCode" v-model="currentAddress.countryCode">
                                <option value="+86">中国大陆 +86</option>
                            </select>
                            <input type="text" id="phoneNumber" v-model="currentAddress.phone"
                                placeholder="电话号码、手机号码必须填一项">
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="setDefaultAddress" v-model="currentAddress.isDefault">
                                设置为默认收货地址
                            </label>
                        </div>
                        <div class="form-actions">
                            <button class="save-address-btn" type="button" @click="saveAddress">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 删除确认弹窗 -->
        <div id="deleteConfirmModal" class="modal" v-if="showDeleteModal">
            <div class="modal-content" style="width:260px;">
                <span class="close" @click="showDeleteModal=false">&times;</span>
                <div class="modal-body" style="text-align:center;padding:2rem 1rem;">
                    <div style="font-size:1.1rem;margin-bottom:2rem;">确认删除该条地址？</div>
                    <div style="display:flex;gap:1rem;justify-content:center;">
                        <button @click="showDeleteModal=false"
                            style="flex:1;padding:0.7rem 0;border-radius:6px;border:none;background:#f5f5f5;color:#333;font-size:1rem;cursor:pointer;">取消</button>
                        <button @click="doDelete"
                            style="flex:1;padding:0.7rem 0;border-radius:6px;border:none;background:#ff5000;color:#fff;font-size:1rem;cursor:pointer;">确认</button>
                    </div>
                </div>
            </div>
        </div>
       

    
    </main>


    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/addresses.js"></script>
</body>

</html>